<template>
	<view class="balance">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<view class="hei_100"></view>
		<!-- #endif -->
		<!-- end -->
		<view class="xian-gray16"></view>
		<view class="nav">
			<navigator url="/pageageA/pages/fen/msg?type=3" class="nava" @click="xitong()">
				<view class="news">
					<view class="msg">系统消息</view>
					<view class="tips2" v-if="tips2 != 0">{{tips2}}</view>
				</view>
			</navigator>
			<navigator url="/pageageA/pages/fen/msg?type=1" class="nava">
				<view class="news">
					<view class="msg">订单消息</view>
					<view class="tips" v-if="tips != 0 ">{{tips}}</view>
				</view>
			</navigator>
			<navigator url="/pageageA/pages/fen/msg?type=2" class="nava">
				<view class="news">
					<view class="msg">互动消息</view>
					<view class="tips1" v-if="tips1 != 0 ">{{tips1}}</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import PublicHeader from '@/components/PublicHeader.vue';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		mixins: [MescrollMixin],
		components: {
			PublicHeader,
			MescrollBody
		},
		computed: mapState(['hasLogin', 'uerInfo']),
		data() {
			return {
				title: '我的消息',
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false
				},
				id: '',
				// page: 1,
				// pages: 1,
				// size: 10,
				table: [],
				tips: 0,
				tips1: 0,
				tips2: 0
			}
		},
		// watch: {
		// 		this.getData()
		// },

		// mounted() {
		// 	var _this = this
		// 	console.log('uerInfo:', _this.uerInfo)
		// 	_this.id = _this.uerInfo.userId
		// 	if (_this.uerInfo.id) {
		// 		_this.id = _this.uerInfo.id
		// 	}
		// 	_this.getData()
		// },
		onLoad() {
			var _this = this
			console.log('uerInfo:', _this.uerInfo)
			_this.id = _this.uerInfo.userId
			if (_this.uerInfo.id) {
				_this.id = _this.uerInfo.id
			}
			_this.getData()
		},
		methods: {
			getData() {
				let _this = this
				// if (this.table.length == 0) {
				// 	this.page = 1
				// } else {
				// 	return
				// }
				_this.$http
					.get('/user/message/notRead', {
						userId: _this.id,
						client: 'app'
					})
					.then(function(response) {
						if (response.success) {
							_this.table = response.data.activeMessage
							_this.tips = response.data.orderNoRead
							_this.tips1 = response.data.activeNoRead
							_this.tips2 = response.data.systemNoRead
							// _this.pages = response.data.pages
						}
					}).catch(function(error) {
						console.log(error);
					});
			},
			xitong() {
				this.tips2 = 0
				console.log(111)
			}
			//下拉刷新的回调
			// downCallback() {
			// 	var _this = this;
			// 		_this.page = 1,
			// 			_this.$http
			// 			.get('/system/message/list', {
			// 				page: _this.page,
			// 				size: _this.size,
			// 				client: '用户端'
			// 			})
			// 			.then(function(response) {
			// 				_this.pages = response.data.pages
			// 				//联网成功的回调,隐藏下拉刷新的状态
			// 				_this.table = response.data.list;
			// 				_this.mescroll.endSuccess();
			// 			})
			// 			.catch(function(error) {
			// 				console.log(error);
			// 				_this.mescroll.endErr();
			// 			});

			// },
			//上拉加载的回调
			// upCallback(page) {
			// 	var _this = this;
			// 		if (_this.page < _this.pages) {
			// 			_this.page = _this.page + 1;
			// 			// _this.mescroll.endErr();
			// 		} else {
			// 			uni.showToast({
			// 				icon: 'none',
			// 				position: 'bottom',
			// 				title: '没有更多数据啦~'
			// 			});
			// 			_this.mescroll.endErr();
			// 			return
			// 		}
			// 		_this.$http
			// 			.get('/system/message/list', {
			// 				page: _this.page,
			// 				size: _this.size,
			// 				client: '用户端'
			// 			})
			// 			.then(function(response) {
			// 				_this.pages = response.data.pages
			// 				//设置列表数据
			// 				_this.table = _this.table.concat(response.data.list);
			// 				_this.mescroll.endSuccess();
			// 			})
			// 			.catch(function(error) {
			// 				console.log(error);
			// 				_this.mescroll.endErr();
			// 			});
			// }

		}
	}
</script>

<style scoped lang="scss">
	// page {
	// 	/* background-color: #F9FAFB; */
	// }
	.msg {
		height: 105rpx;
		line-height: 105rpx;
		padding-left: 20rpx;
	}

	.title {
		margin: 30rpx 0 10rpx 0;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(51, 51, 51, 1);
	}

	.nav {
		width: 100%;
		background-color: #FFFFFF;
	}

	.tips,
	.tips1,
	.tips2 {
		padding: 0 10rpx;
		border-radius: 100%;
		background: #f34403;
		color: #fff;
		font-size: 22rpx;
		text-align: center;
		line-height: 30rpx;
	}

	.nava {
		border-bottom: 0.5px solid rgba(235, 236, 237, 1);
	}

	.news {
		width: 91.46%;
		margin-left: 4.27%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
